<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>添加工序</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-card class="box-card">
        <div style="float: left">
          <el-button @click="goafter" type="info">返回上一级</el-button>
        </div>
        <div align="center" class="d1" style="color: mediumblue"><h3>工序添加界面</h3></div>
        <div class="d2">
          <el-form :model="processForm" :rules="rules" label-width="80px">
            <el-row :gutter="22">
              <el-col :span="12">
                <el-form-item label="编号" prop="code" label-width="110px">
                  <el-input v-model="processForm.code"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name" label-width="110px">
                  <el-input v-model="processForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单价" prop="price" label-width="110px">
                  <el-input v-model.number="processForm.price"></el-input>
                </el-form-item>
                <el-form-item label="收费方式" prop="ctype" label-width="110px">
                  <el-select v-model="processForm.ctype" placeholder="请选择">
                    <el-option label="按时间（分钟）" value="1"></el-option>
                    <el-option label="按面积（平方厘米）" value="2"></el-option>
                    <el-option label="按重量（千克）" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="准备工时单价" label-width="110px" prop="prePrice">
                  <el-input v-model.number="processForm.prePrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="15">
                <el-form-item label="描述" label-width="110px">
                  <el-input type="textarea" v-model="processForm.remarks"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div align="center" style="float: right;width: 100%">
              <el-form-item>
                <div>
                  <el-button type="primary" @click="saveProcess">保存</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
  export default {
    name: "addProcess",
    data() {
      return {
        processForm: {},
        rules: {
          code: [
            {required: true, message: '请输编号', trigger: 'blur'},
            {min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入工序名称', trigger: 'blur'},
            {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
          ],
          ctype: [
            {required: true, message: '请输入工序类型', trigger: 'change'}
          ],
          remarks: [
            {required: true, message: '请输入工序描述', trigger: 'change'},
            {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入价格', trigger: 'change'},
            {type: "number", message: '请输入数字类型', trigger: 'blur'}
          ],
          prePrice: [
            {required: true, message: '请输入准备价格', trigger: 'change'},
            {type: "number", message: '请输入数字类型', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      saveProcess: function () {
        this.$http.post("/process/save", this.processForm).then((res) => {
          //如何提示
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.$router.push('/process')
        });
      },
      resetForm: function () {
        this.processForm = {}
      },
      hx: function (id) {
        this.$http.get("/process/get/" + id).then((res) => {
          this.processForm = res.data.result
          if (res.data.success) {
            this.processForm = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    mounted() {
      let id = this.$route.query.id
      if (id != null) {
        this.hx(id)
      }
    },
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }
</style>
